<template>
  <div class="scorePage" v-if="dataReady">
    <div class="titleContainer">
      分公司班子综合考核评分
      <van-button class="filterBtn" type="primary" size="small" @click="openPicker">
        {{ selectedDimension.dimensionName }}
        <svg-icon icon="dropDown"></svg-icon>
      </van-button>
    </div>
    <top-rank :unit="'分'" :topRank="topRank" :selectedDimension="selectedDimension"></top-rank>
    <div class="list">
      <div class="listHeader">
        <div class="rankHeader rankContainer" @click="handleSortToggle">
          <div>排名</div>
          <div>
            <svg-icon :icon="queryParams.sort === 'DESC' ? 'iconJianxu' : 'iconShengxu'" class="sortIcon"></svg-icon>
          </div>
        </div>
        <div class="rankHeader companyHeader">分公司</div>
        <div class="rankHeader barSchedule"></div>
        <div class="rankHeader">得分</div>
      </div>
      <div class="listLine"></div>
      <div class="listContent">
        <van-list
          ref="vanList"
          v-model="loading"
          :finished="finished"
          finished-text=""
          @load="onLoad"
          :immediate-check="false"
        >
          <div v-for="(item, index) in scoreInfoList" @click="gotoPerformancePage(item)" :key="index" class="listItem">
            <div class="listItemRank">
              <div
                :class="[
                  { rankDefault: true },
                  { rankFirst: item.rank === 1 },
                  { rankSecond: item.rank === 2 },
                  { rankThird: item.rank === 3 }
                ]"
              >
                {{ item.rank }}
              </div>
            </div>

            <div class="company companyName">{{ item.institutionName }}</div>
            <div class="view">
              <div
                class="progress"
                :style="{ width: `${Number(item.examineScore) >= 100 ? 100 : item.examineScore}%` }"
              ></div>
            </div>
            <div class="company companyScore">{{ item.examineScore }}</div>
          </div>
        </van-list>
      </div>
      <div class="explain">
        以上数据仅供参考，最终以年底关账数据为准
      </div>
    </div>
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        title="选择职位"
        show-toolbar
        :columns="dimensions"
        confirm-button-text="确定"
        value-key="dimensionName"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
  </div>
</template>

<script>
import TopRank from '@/components/TopRank.vue'
import { getAssessmentDimension, getAssessmentInstScore } from '@/api/home'
import sensormixin from '@/mixins'

export default {
  mixins: [sensormixin],
  data() {
    return {
      showPicker: false,
      dimensions: [],
      topRank: [], // 排序组件
      selectedDimension: {}, // 当前选中的维度
      scoreInfoList: [], // 排名信息列表
      loading: false,
      finished: false,
      /** sortToggle为true表示点击排序,不触发onload事件*/
      sortToggle: false,
      queryParams: {
        pageNumber: 1,
        pageSize: 20,
        dimensionId: '',
        sort: 'DESC'
      },
      dataReady: false
    }
  },
  components: {
    TopRank
  },
  mounted() {
    this.initData()
    this.getAssessmentDimension().then(() => {
      this.getAssessmentInstScore().then(() => {
        this.dataReady = true
      })
    })
  },
  methods: {
    openPicker() {
      this.showPicker = true
    },
    initData() {
      this.finished = false
      this.queryParams.pageNumber = 1
      this.scoreInfoList = []
    },
    initVantListScroll() {
      // 滚动到顶部，解决异步先后问题
      if (this.$refs.vanList.$el) {
        this.$refs.vanList.$el.scrollTo(0, 0)
      }
    },
    onConfirm(value) {
      this.initData()
      this.initVantListScroll()
      this.sortToggle = true
      this.queryParams.sort = 'DESC'
      /** 获取切换参数，重新请求数据*/
      this.queryParams.dimensionId = value.dimensionId
      this.selectedDimension = value
      this.closePicker()
      this.getAssessmentInstScore()
    },
    onCancel() {
      this.closePicker()
    },
    closePicker() {
      this.showPicker = false
    },
    handleClickItem(institutionValue, institutionName) {
      const isRoot = this.selectedDimension.root
      const { dimensionId } = this.selectedDimension
      if (isRoot) {
        this.$router.push(`/performanceRank?institutionId=${institutionValue}&dimensionId=${dimensionId}`)
      } else {
        this.$router.push(`/performanceDetails?dimensionId=${dimensionId}&institutionValue=${institutionValue}`)
      }
    },
    handleSortToggle() {
      this.initData()
      this.initVantListScroll()
      this.sortToggle = true
      this.queryParams.sort = this.queryParams.sort === 'DESC' ? 'ASC' : 'DESC'
      this.getAssessmentInstScore()
    },
    gotoPerformancePage(item) {
      const { institutionValue, institutionName } = item
      this.handleClickItem(institutionValue, institutionName)
    },
    async getAssessmentDimension() {
      const cachedDimensionId = window.sessionStorage.getItem('PERFORMANCE_DIMENSION_ID')
      const result = await getAssessmentDimension()
      if (result.success) {
        this.dimensions = result.value
        if (cachedDimensionId) {
          this.selectedDimension = this.dimensions.find(item => item.dimensionId === cachedDimensionId)
          window.sessionStorage.removeItem('PERFORMANCE_DIMENSION_ID')
        } else {
          this.selectedDimension = this.dimensions.find(item => item.root)
        }

        this.queryParams.dimensionId = this.selectedDimension.dimensionId
      }
    },
    onLoad() {
      if (this.loading && !this.sortToggle) {
        this.queryParams.pageNumber += 1
        this.getAssessmentInstScore()
      }
    },
    async getAssessmentInstScore() {
      const result = await getAssessmentInstScore(this.queryParams)
      if (result.success) {
        this.loading = false
        this.sortToggle = false
        const { content, pageable } = result.value
        if (content && content.length < this.queryParams.pageSize) {
          this.finished = true
        }
        const contentTemp = [...content]
        /** 处理排序组件数据,排名前三*/
        if (this.queryParams.sort === 'DESC' && pageable.pageNumber === 0) {
          this.topRank = contentTemp.slice(0, 3)
        }
        this.scoreInfoList = this.scoreInfoList.concat(content)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.scorePage {
  /deep/.svg-icon {
    margin-top: 2px;
  }
  /deep/.van-button__content {
    min-width: 74px;
  }
  .titleContainer {
    display: flex;
    align-items: center;
    font-size: 16px;
    .filterBtn {
      height: 32px;
      background-color: #333948;
      border: none;
      margin-left: auto;
      font-size: 14px;
      border-radius: 6px;
      margin-right: 12px;
    }
  }

  .list {
    background: #393f52;
    border-radius: 12px;
    padding: 0 16px;
    height: calc(100vh - 340px - constant(safe-area-inset-bottom));
    height: calc(100vh - 340px - env(safe-area-inset-bottom));
    .explain {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      padding-top: 2px;
    }
    .listHeader {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 46px;
      .companyHeader {
        margin-left: 10px;
        width: 60px;
      }
      .sortIcon {
        font-size: 16px;
      }
      .barSchedule {
        width: 60px;
        flex-grow: 1;
      }
      .rankContainer {
        width: 50px;
      }
      .rankHeader {
        display: flex;
        align-items: center;
        line-height: 17px;
        font-size: 12px;
        color: #979aa4;
      }
    }
    .listLine {
      width: 335px;
      border: 0.4px solid #292e3a;
      position: absolute;
      left: 20px;
    }

    .listContent {
      height: calc(100% - 45px);
      overflow-y: auto;
      padding-top: 16px;
      .listItem {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 18px;
        .listItemRank {
          width: 50px;
        }
        .rankDefault {
          width: 28px;
          height: 20px;
          background: linear-gradient(135deg, rgba(134, 142, 167, 0.14) 0%, rgba(98, 107, 135, 0.14) 100%);
          border-radius: 10px;
          text-align: center;
          line-height: 20px;
        }

        .rankFirst {
          background: linear-gradient(135deg, rgba(255, 215, 131, 0.91) 0%, rgba(255, 185, 75, 0.43) 100%);
        }

        .rankSecond {
          background: linear-gradient(135deg, rgba(255, 144, 69, 0.84) 0%, rgba(255, 97, 50, 0.6) 100%);
        }

        .rankThird {
          background: linear-gradient(135deg, rgba(145, 182, 255, 0.51) 0%, rgba(121, 117, 255, 0.42) 100%);
        }

        .company {
          line-height: 20px;
          color: #e9e9ed;
          font-weight: 500;
          font-size: 14px;
        }
        .companyName {
          max-width: 90px;
          min-width: 60px;
          margin-left: 10px;
        }
        .companyScore {
          min-width: 60px;
          text-align: right;
        }

        .view {
          background: #444a5c;
          height: 5px;
          width: 60px;
          flex-grow: 1;
          .progress {
            background: #4188e8;
            height: 5px;
          }
        }
      }
    }
  }
}
</style>
